<template>
  <headPage></headPage>
  <div class="main_box information" v-loading="loading">
    <titleBack title="订单详情"></titleBack>
    <div class="order_content">
      <div class="content_title">
        <div class="title_1"></div>
        <div class="title_2">课程信息</div>
      </div>
      <div class="course">
        <div class="course_le">
          <el-image fit="cover" :src="detailsInfo.fengmiantu" :lazy="true" />
        </div>
        <div class="course_ri">
          <div class="course_title">
            {{ detailsInfo.freecourselist_kechengbiaoti }}
          </div>
          <div class="course_info">
            <div class="information_text">
              节数：{{ detailsInfo.jieshu }}节课程
            </div>
            <div class="information_text">
              课时：{{ detailsInfo.keshi }}小时
            </div>
            <div class="information_text">
              学习人数：{{ detailsInfo.xunixuexirenshu }}人已学习
            </div>
          </div>
          <div class="course_price">
            <span class="price_2">¥{{ detailsInfo.shoujia }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order_content">
      <div class="content_title">
        <div class="title_1"></div>
        <div class="title_2">订单信息</div>
      </div>
      <div class="order_information">
        <div class="order_item">
          <span>支付金额：</span>
          <span>￥{{ detailsInfo.dingdanjiage }}</span>
        </div>
        <div class="order_item">
          <span>下单时间：</span>
          <span>{{ detailsInfo.create_time }}</span>
        </div>
        <div class="order_item" v-if="detailsInfo.dingdanzhuangtai > 0">
          <span>支付方式：</span>
          <span>{{
            detailsInfo.zhifufangshi == "alipay" ? "支付宝支付" : "微信支付"
          }}</span>
        </div>
        <div class="order_item" v-if="detailsInfo.dingdanzhuangtai > 0">
          <span>支付时间：</span>
          <span>{{ detailsInfo.zhifushijian }}</span>
        </div>
      </div>
    </div>
    <div class="order_content" v-if="detailsInfo.dingdanzhuangtai == 2">
      <div class="content_title">
        <div class="title_1"></div>
        <div class="title_2">评价信息</div>
      </div>
      <div class="evaluate_information">
        <div class="evaluate_one">
          <div class="ont_1">
            <span>评价星级：</span>
            <el-rate
              :disabled="true"
              v-model="comment_info.xingji"
              size="small"
              :max="5"
              :clearable="true"
              void-color="#E6E6E6"
            />
          </div>
          <div class="ont_2">评价时间：{{ comment_info.create_time }}</div>
        </div>
        <div class="evaluate_two">
          <div>评价内容：</div>
          <div>{{ comment_info.pingjianeirong }}</div>
        </div>
        <div class="evaluate_three" v-if="comment_info.pingjiatu.length > 0">
          <div>相关图片：</div>
          <div class="evaluate_imgs">
            <el-image
              :preview-src-list="comment_info.pingjiatu"
              :initial-index="index"
              v-for="(url, index) in comment_info.pingjiatu"
              fit="cover"
              :key="index"
              :src="url"
              :lazy="true"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="operation">
      <div
        class="operation_1"
        @click="payment"
        v-if="detailsInfo.dingdanzhuangtai == 0"
      >
        去付款
      </div>

      <div
        class="operation_2"
        @click="goInvoice"
        v-if="
          detailsInfo.dingdanzhuangtai > 0 && detailsInfo.is_open_invoice == 0
        "
      >
        申请发票
      </div>
      <div
        class="operation_1"
        @click="evaluateClick"
        v-if="detailsInfo.dingdanzhuangtai == 1"
      >
        去评价
      </div>
    </div>
  </div>
  <footerPage></footerPage>

  <evaluate
      ref="evContent"
      :course_id="course_id"
      @confirm="evaluateConfirm"
    ></evaluate>
</template>


<script name="orderDetails" setup>
import emitter from "@/utils/mitt.js";
import { post65e8437b2201d } from "@/utils/api.js";
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import titleBack from "../titleBack.vue";
import titleText from "../titleText.vue";
import evaluate from "./evaluate.vue";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
let order_sn = ref(route.query.order_sn);

onMounted(() => {
  getData();
  emitter.on('paySuccess',() => {
    getData();
  })
});
onBeforeUnmount(() => {
  emitter.off('paySuccess');
})
let loading = ref(true);
let detailsInfo = ref({});
let comment_info = ref({});
function getData() {
  post65e8437b2201d({
    dingdanhao: order_sn.value,
  })
    .then((res) => {
      console.log(res);
      loading.value = false;
      if (res.code == 1) {
        detailsInfo.value = res.data;
        if (detailsInfo.value.dingdanzhuangtai == 2) {
          comment_info.value = res.data.comment_info;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

// 去付款
function payment() {
  router.push({
    path: "/pay",
    query: {
      aid: detailsInfo.value.freecourselist_id,
      price: detailsInfo.value.shoujia,
      order_sn: detailsInfo.value.dingdanhao,
    },
  });
}
// 去开票
function goInvoice() {
  router.push({
    path: "/MyOrder/invoice",
    query: {
        freecourselist_id: detailsInfo.freecourselist_id,
        freecourseorder_id: detailsInfo.aid
    }
  });
}

// 去评价
let evContent = ref(null);
let course_id = ref("");
function evaluateClick() {
  course_id.value = detailsInfo.value.freecourselist_id;
  evContent.value.openLayer();
}
function evaluateConfirm() {
  loading.value = true;
  getData();
}
</script>

<style lang="scss" scoped>
.information {
  margin-top: 110px;
  margin-bottom: 24px;
  padding: 18px 16px;
  background: #fff;
  min-height: 358px;
}
.order_content {
  border: 1px solid #e5e5e5;
  margin-top: 12px;
  .content_title {
    background: #f6f7f9;
    height: 23px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    .title_1 {
      width: 2px;
      height: 10px;
      background: #1f52ae;
    }
    .title_2 {
      font-size: 9px;
      font-weight: 500;
      margin-left: 5px;
    }
  }
  .course {
    padding: 12px;
    display: flex;
    .course_le {
      width: 176px;
      height: 100px;
    }
    .course_ri {
      position: relative;
      width: calc(100% - 186px);
      padding-left: 10px;
      .course_title {
        font-size: 12px;
        font-weight: bold;
      }
      .course_info {
        .information_text {
          margin-top: 8px;
          color: #666;
          font-size: 8px;
        }
      }
      .course_price {
        .price_1 {
          color: #62ce96;
          font-size: 10px;
          font-weight: bold;
        }
        .price_2 {
          color: #f43024;
          font-size: 10px;
          font-weight: bold;
        }
      }
    }
  }
  .order_information {
    padding: 0 12px 12px;
    .order_item {
      margin-top: 12px;
      font-size: 8px;
    }
  }
  .evaluate_information {
    padding: 0 12px 12px;
    .evaluate_one {
      display: flex;
      align-items: center;
      margin-top: 12px;
      .ont_1 {
        display: flex;
        align-items: center;
        font-size: 8px;
      }
      .ont_2 {
        margin-left: 28px;
        font-size: 8px;
      }
    }
    .evaluate_two {
      display: flex;
      font-size: 8px;
      margin-top: 12px;
    }
    .evaluate_three {
      margin-top: 12px;
      display: flex;
      font-size: 8px;
      .evaluate_imgs {
        .el-image {
          width: 57px !important;
          height: 57px !important;
          margin-right: 5px !important;
          border-radius: 2px !important;
        }
      }
    }
  }
}
.operation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 23.5px;
  .operation_1 {
    width: 120px;
    height: 24px;
    background: #1f52ae;
    border-radius: 3px;
    font-size: 8px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 10px;
  }
  .operation_2 {
    border: 0.5px solid #1f52ae;
    width: 120px;
    height: 24px;
    background: #fff;
    border-radius: 3px;
    font-size: 8px;
    color: #1f52ae;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 12px;
  }
}

.save_btn {
  width: 120px;
  height: 24px;
  background: #1f52ae;
  font-size: 8px;
  color: #fff;
  border-radius: 3px;
  margin: 32px 0 0 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>